<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/swiper.css">
</head>

<body>
  <div class="moli">
    <!-- 顶部输入框 开始-->
    <div class="top">
      <div class="location">
        <p class="location-point">郑州</p>
        <i class="iconfont icon-jiantou-xiangxia"></i>
      </div>
      <div class="ipt-box">

        
        <i class="iconfont icon-sousuo1"></i>
        <input type="text" class="ipt" placeholder="输入商户名、地点或菜品">
      </div>
      <i class="iconfont icon-shenglvehao"></i>
      <!-- 右上角 下拉框  开始-->
      <div class="selectbox">
        <ul class="sb-down">
          <li>扫一扫</li>
          <li>付款码</li>
          <li>开发票</li>
          <li>骑单车</li>
          <li>门票</li>
        </ul>
      </div>
      <!-- 右上角 下拉框  结束-->
    </div>
    <!-- 顶部输入框 结束 -->

    <!-- 轮播图 开始-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./images/lunbo.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./images/lunbo.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./images/lunbo.jpg" alt="">
        </div>
      </div>
    </div>
    <!-- 轮播图 结束-->

    <!-- 图标开始 -->
    <div class="icons">
      <div class="icons-box">
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="./images/tubiao-02.png" alt="">
          </div>
          <p class="icon-desc">租车</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="./images/tubiao-02.png" alt="">
          </div>
          <p class="icon-desc">租车</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="./images/tubiao-02.png" alt="">
          </div>
          <p class="icon-desc">租车</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="./images/tubiao-02.png" alt="">
          </div>
          <p class="icon-desc">租车</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="./images/tubiao-02.png" alt="">
          </div>
          <p class="icon-desc">租车</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="./images/tubiao-02.png" alt="">
          </div>
          <p class="icon-desc">精品线路</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="./images/tubiao-02.png" alt="">
          </div>
          <p class="icon-desc">租车</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="./images/tubiao-02.png" alt="">
          </div>
          <p class="icon-desc">租车</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="./images/tubiao-02.png" alt="">
          </div>
          <p class="icon-desc">租车</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="./images/tubiao-02.png" alt="">
          </div>
          <p class="icon-desc">景区导览</p>
        </div>
      </div>
    </div>
    <!-- 图标结束 -->

    <!-- 我的卡包 开始-->
    <div class="mycard">
      <p class="mycard-word ">我的卡包</p>
      <div class="travel-card-box">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./images/travel-card.png" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./images/travel-card.png" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./images/travel-card.png" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./images/travel-card.png" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./images/travel-card.png" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./images/travel-card.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 我的卡包 结束-->

    <!--热门景点  开始-->
    <div class="hotview">
      <p class="hotview-word">热门景点</p>
      <div class="hv-box clearfix">
        <div class="swiper-wrapper">
          <div class="hotview-pic swiper-slide">
            <img src="./images/hotview.png" alt="" class="hvp-pict">
            <p>龙门石窟 奉先寺</p>
          </div>
          <div class="hotview-pic swiper-slide">
            <img src="./images/hotview.png" alt="" class="hvp-pict">
            <p>龙门石窟 奉先寺</p>
          </div>
          <div class="hotview-pic swiper-slide">
            <img src="./images/hotview.png" alt="" class="hvp-pict">
            <p>龙门石窟 奉先寺</p>
          </div>
        </div>
      </div>

      <!-- 精选推荐 -->
      <p class="hotview-word">精选推荐</p>
      <div class="special">
        <div class="hv-box clearfix">
          <div class="swiper-wrapper">
            <div class="hotview-pic swiper-slide hotview-pic1">
              <img src="./images/flower-ticket.png" alt="" class="flower-ticket">
            </div>
            <div class="hotview-pic swiper-slide hotview-pic1">
              <img src="./images/flower-ticket01.png" alt="" class="flower-ticket">
            </div>
            <div class="hotview-pic swiper-slide hotview-pic1">
              <img src="./images/flower-ticket01.png" alt="" class="flower-ticket">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--热门景点  结束-->
    <!-- 附近 智能排序 筛选  开始-->
    <div class="nearby-container">
      <div class="nc-box-01">
        <div class="nearby-word-01">
          <p>附近</p>
          <img src="./images/arrowdown-01.png" alt="">
        </div>
        <div class="nearby-word-01">
          <p>智能排序</p>
          <img src="./images/arrowdown-01.png" alt="">
        </div>
        <div class="nearby-word-01">
          <p>筛选</p>
          <img src="./images/arrowdown-01.png" alt="">
        </div>
      </div>
      <!-- 景区详细情况 开始-->
      <div class="nc-box-02">
        <div class="ncb-park">
          <img src="./images/sights.png" alt="" class="ncb-park-left">
          <div class="ncb-park-right">
            <div class="npr-box01">
              <p>5A级</p>
              <p>世博园</p>
            </div>
            <div class="npr-box02">
              <p>公园|洛龙市洛龙区 距我1.2km</p>
            </div>
            <div class="npr-box03">
              <p>刷脸入园</p>
              <p>刷脸入园</p>
              <p>刷脸入园</p>
            </div>
            <div class="npr-box04">
              <p>9.5评分</p>
              <div class="npr-box04-word">
                <span>￥</span>
                <span class="npr-price">56</span>
                <span>起</span>
              </div>
            </div>
          </div>
        </div>
        <div class="ncb-park">
          <img src="./images/imagery.png" alt="" class="ncb-park-left">
          <div class="ncb-park-right">
            <div class="npr-box01">
              <p>5A级</p>
              <p>世博园</p>
            </div>
            <!-- <div class="npr-box02">
              <p>公园|洛龙市洛龙区距我1.2km</p>
            </div> -->
            <div class="npr-box03">
              <p>刷脸入园</p>
              <p>刷脸入园</p>
              <p>刷脸入园</p>
            </div>
            <div class="npr-box04">
              <p>9.5评分</p>
              <div class="npr-box04-word">
                <span>￥</span>
                <span class="npr-price">56</span>
                <span>起</span>
              </div>
            </div>
          </div>
        </div>
        <div class="ncb-park">
          <img src="./images/sights.png" alt="" class="ncb-park-left">
          <div class="ncb-park-right">
            <div class="npr-box01">
              <p>5A级</p>
              <p>世博园</p>
            </div>
            <div class="npr-box02">
              <p>公园|洛龙市洛龙区 距我1.2km</p>
            </div>
            <div class="npr-box03">
              <p>刷脸入园</p>
              <p>刷脸入园</p>
              <p>刷脸入园</p>
            </div>
            <div class="npr-box04">
              <p>9.5评分</p>
              <div class="npr-box04-word">
                <span>￥</span>
                <span class="npr-price">56</span>
                <span>起</span>
              </div>
            </div>
          </div>
        </div>
        <div class="ncb-park">
          <img src="./images/imagery.png" alt="" class="ncb-park-left">
          <div class="ncb-park-right">
            <div class="npr-box01">
              <p>5A级</p>
              <p>世博园</p>
            </div>
            <div class="npr-enterpark">
              <!-- <div class="npr-box02">
                <p>公园|洛龙市洛龙区 距我1.2km</p>
              </div> -->
              <div class="npr-box03">
                <p>刷脸入园</p>
                <p>刷脸入园</p>
                <p>刷脸入园</p>
              </div>
            </div>

            <div class="npr-box04">
              <p>9.5评分</p>
              <div class="npr-box04-word">
                <span>￥</span>
                <span class="npr-price">56</span>
                <span>起</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 景区详细情况 结束-->
    </div>
    <!-- 附近 智能排序 筛选  结束-->

    <!-- 底部导航栏 开始-->
    <div class="bottom-nav">
      <div class="bn-homepage select">
        <img src="./images/homepage.png" alt="">
        <p>首页</p>
      </div>
      <div class="bn-evaluate">
        <img src="./images/evaluate.png" alt="">
        <p>评论</p>
      </div>
      <div class="qr-code">
        <img src="./images/QR-code.png" alt="">
        <p>二维码</p>
      </div>
      <div class="bn-mall">
        <img src="./images/mall.png" alt="">
        <p>商城</p>
      </div>
      <div class="bn-person">
        <img src="./images/personal-center.png" alt="">
        <p>个人中心</p>
      </div>
    </div>
    <!-- 底部导航栏 结束-->
    <!-- <div style="height: 10rem">
      <p>测试用</p>
      <p>测试用</p>
      <p>测试用</p>
    </div> -->
  </div>
</body>
<script src="http://www.molicarl.com/resources/js/jquery-1.8.3.min.js"></script>
<script src="./js/rem.js"></script>
<script src="./js/index.js"></script>
<script src="./js/swiper.js"></script>

</html>